<template>
	<view>
		<view class="detail-title2">
			{{listInfo.applyUserName}}的维修备件申请
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">申请时间</view>
			<view class="right-title">{{listInfo.createTime}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">申请类型</view>
			<view class="right-title">
				{{listInfo.applyType==1?'维修申请':listInfo.applyType==2?'维保申请':listInfo.applyType==3?'点检申请':''}}
			</view>
		</view>
		<view class="gz-desc white-bg" style="border-bottom: 2rpx solid #f5f5f5;" v-if="listInfo.applyType!=2&&listInfo.applyType!=3">
			<view class="title" style="color: #666666;">故障现象</view>
			<view class="desc-reason2" style="margin-top: 16rpx;color: #2b2b2b;">{{listInfo.failurePhenomenon}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">申请备件数量</view>
			<view class="right-title">{{listInfo.applyAmount}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">申请人</view>
			<view class="right-title">{{listInfo.applyUserName}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">审核人</view>
			<view class="right-title">{{listInfo.dealUserName}}</view>
		</view>
		<view class="top-title defalut-bg" style="background: #f5f5f5;">
			<view class="left-title">备件申请列表</view>
			<view class="right-title right-ritle2">
				<view class="all-chuku" @click="togoAllSuccess">全部出库</view>
				<view class="all-btg" @click="togoAllFail">全部不通过</view>
			</view>
		</view>
		<view v-for="(item,index) in listInfo.partDetailResponses" :key="index">
			<view class="list-wrapper">
				<view class="list-item">
					<view class="left-icon">
						<!-- <image :src="item.partPicture"></image> -->
						<image :src="item.partPicture?item.partPicture:'../../../static/images/index/weibaorenwu.png'">
						</image>
					</view>
					<view class="right-txt">
						<view class="txt1">
							<view class="txt1-left">{{item.partNum}}{{item.partName}}</view>
							<view class="txt1-right tag-main2">
								待审核
							</view>
						</view>
						<view class="txt3">
							<view>{{item.partTypeName}}</view>
							<view style="color: #2f2f2f;">申请数量：{{item.applyAmount}}</view>
						</view>
						<!-- <view class="txt2">总价值：{{item.price}}</view> -->
					</view>
				</view>
				<view class="item-radio">
					<u-radio-group v-model="item.isPass" @change="changeSelect(item,index)">
						<u-radio shape="circle" label="通过" name="1" activeColor="#0F53AC" :labelColor="item.isPass==1 ? '#0F53AC':'#4d4d4d'" size="22" labelSize="15">
						</u-radio>
						<u-radio shape="circle" label="不通过" name="2" activeColor="#0F53AC" :labelColor="item.isPass==2 ? '#0F53AC':'#4d4d4d'" size="22" labelSize="15"
							:customStyle="{marginLeft: '206rpx'}"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<!-- 通过样式 -->
			<view v-if="item.isPass==1">
				<view v-for="(c,i) in infoList[index].List" :key="i">
					<view class="line8" v-if="infoList[index].List.length>1 && i>0"></view>
					<view class="bx-list" style="margin-top: 2rpx;">
						<view class="bx-list-title" @click="togoBatcheSelect(index,c,i)">
							<view class="left">
								<view style="color: red;">*</view>出库批次
							</view>
							<view class="right1">
								<view :style="c.batchNum!=''? 'color: #2B2B2B': ''">{{(c.batchNum!='')?c.batchNum+'【'+c.expireDate+ '】':'请选择'}}</view>
								<view class="iconfont icon-app-xiangyou" :style="c.batchNum!=''? 'color: #2B2B2B': ''"></view>
							</view>
						</view>
					</view>
					<view class="bx-list" style="margin-top: 2rpx;" v-if="c.batchNum!=''">
						<view class="bx-list-title">
							<view class="left">
								<view style="color: red;">*</view>出库数量 <view class="kucun-num" v-if="c.maxAmount">
									库存数量:{{c.maxAmount}}</view>
							</view>
							<view class="right1">
								<view class="txt-right">
									<view class="addnum">
										<u-number-box v-model="c.stockAmount" :name="i" min="1"
											:max="setMax(infoList[index].List,item.applyAmount,c.maxAmount,c.batchNum)">
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="delete-pc" v-if="i>0" @click="deleteBatche(index,c,i)">
						删除批次
					</view>
				</view>

				<view class="addbtn-wrapper">
					<view class="add-btn" @click="addChukubatchNum(item,index)">
						添加批次
					</view>
				</view>
			</view>
			<!-- 不通过样式 -->
			<view v-if="item.isPass==2">
				<view class="not-pass">
					<view style="color: red;">*</view> 不通过原因
				</view>
				<view class="input-textrea">
					<u--textarea class="textrea" v-model="item.reason" placeholder="请输入原因"></u--textarea>
				</view>
			</view>
			<view class="line8"></view>
		</view>
		<view class="clear-btn"></view>
		<view class="btn-bottom">
			<view class="btn-right" @click="$dianji(togoConfirm,'onoff')">提交</view>
		</view>
		<!-- 出库批次选择 -->
		<u-popup :show="showBatch" mode="bottom" :round="10" @close="close()" @open="open">
			<view class="sex-select">
				<view class="sex-item" v-for="(item,index) in BatchList" :key="index">
					<view class="txt" @click="updateItem(item,index)">{{item.batchNum}}--{{item.expireDate}}</view>
					<!-- <view class="txt txt2" v-else>{{item.batchNum}}</view> -->
				</view>
			</view>
		</u-popup>
		<!-- 全局loading -->
		<u-loading-page :loading="loading"></u-loading-page>
		<u-popup :show="showAll" mode="bottom" :round="24" @close="close" @open="open">
			<view class="reason">
				<view class="title">
					<view class="left">不通过原因</view>
					<view class="iconfont icon-app-close title-right" @click="close"></view>
				</view>
				<view class="input-textrea">
					<u--textarea :cursorSpacing='50' class="textrea" v-model="description"
						placeholder="请输入不通过原因"></u--textarea>
				</view>
				<view class="popup-btn">
					<view class="btn-comfir" @click="confim">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				description: '',
				showAll: false,
				value: "",
				value2: 1,
				bjId: '',
				listInfo: {},
				showBatch: false,
				BatchList: [],
				infoList: [],
				params: [],
				// params:[{
				// 	applyDetailId: '', //详情id
				// 	auditResult: '', //0.待提交  1.待审核   2.审核不通过  3.审核通过
				// 	reason: '',
				// 	detailRequests: []
				// }],
				selectIndex: '',
				listIndex: '',
				partId: '',
				onoff: true,
				loading: false,
			}
		},
		onLoad(options) {
			if (options) {
				this.bjId = options.id;
				// this.params.applyDetailId = this.bjId;
			}
			this.getListInfo();

		},
		methods: {
			//设置最大出库数量
			setMax(list, applyAmount, maxAmount, batchNum) {
				let num = 1
				const newList = list.filter(item => item.batchNum !== batchNum)
				if (newList.length > 0) {
					newList.forEach(item => {
						num = applyAmount - item.stockAmount
					})
					num = num > maxAmount ? maxAmount : num
				} else {
					num = maxAmount > applyAmount ? applyAmount : maxAmount
				}
				return num
			},

			confim() {
				if (this.listInfo.partDetailResponses.length > 0) {
					this.listInfo.partDetailResponses.forEach((s, index) => {
						s.isPass = '2'; //不通过
						this.params[index].auditResult = 2;
						this.listInfo.partDetailResponses[index].reason = this.description
						this.params[index].reason = this.description;
					})
				}
				this.showAll = false
			},


			getPartBatchList(e, index) {
				uni.$u.http.get(`/device/mobile/devicePartBatch/getPartBatchList/${e.partId}/1`).then(res => {
					if (res.code == 0) {
						this.infoList[index].List[0].partId = e.partId
						this.infoList[index].List[0].id = res.data[0].id
						this.infoList[index].List[0].batchNum = res.data[0].batchNum
						this.infoList[index].List[0].maxAmount = res.data[0].stockAmount
						this.infoList[index].List[0].expireDate = res.data[0].expireDate
						this.infoList[index].List[0].stockAmount = 1
					}
				}).catch(err => {
					uni.$u.toast(err)
				})
			},
			changeSelect(e, index) {
				console.log('改变了--->222', e, index)
				if (e.isPass == 1) { //通过
					this.params[index].auditResult = 3;
				}
				if (e.isPass == 2) { // 不通过
					this.params[index].auditResult = 2;
				}
				console.log('changeSelect===>', this.params)
			},
			getListInfo() {
				uni.$u.http.get(`/device/mobile/devicePartApply/getApplyInfo/${this.bjId}`).then(res => {
					if (res.code == 0) {
						if (res.data.partDetailResponses.length > 0) {
							res.data.partDetailResponses.forEach(item => {
								item.isPass = 0; //0-未选择 1-通过 2-不通过
								item.reason = ''; //不通过理由
								let dd = {
									item: item,
									List: item.partBatches
								}
								this.infoList.push(dd)
								let ss = {
									applyDetailId: item.applyDetailId, //详情id
									auditResult: '', //0.待提交  1.待审核   2.审核不通过  3.审核通过
									reason: '',
									detailRequests: []
								}
								this.params.push(ss);
							})

						}
						this.listInfo = JSON.parse(JSON.stringify(res.data));
						console.log('this.listInfo===>', this.listInfo, this.infoList[0])
					}
				}).catch(err => {
					uni.$u.toast(err)
				})
			},
			open() {},
			close() {
				this.showBatch = false
				this.showAll = false
			},
			togoBatcheSelect(i, item, index) {
				uni.$u.http.get(`/device/mobile/devicePartBatch/getPartBatchList/${item.partId}/1`).then(res => {
					if (res.code == 0) {
						this.BatchList = [];
						if (res.data.length > 0) {
							res.data.forEach(item => {
								if (item.stockAmount > 0) {
									// item.isChecked=false;
									this.BatchList.push(item);
								}
							})
						}
						this.listIndex = i;
						this.selectIndex = index;
						this.showBatch = true;
					}
				}).catch(err => {
					uni.$u.toast(err)
				})

				//为了防止全部同意这种情况我在这里调用接口获取下拉数据

			},
			updateItem(item, index) {
				var _this = this;
				let dd = true;
				_this.infoList[_this.listIndex].List.forEach(s => {
					if (s.id == item.id) {
						uni.$u.toast('该批次已被选择')
						return dd = false
					}
				})
				if (dd) {
					_this.infoList[_this.listIndex].List[_this.selectIndex].id = item.id;
					_this.infoList[_this.listIndex].List[_this.selectIndex].batchNum = item.batchNum;
					_this.infoList[_this.listIndex].List[_this.selectIndex].maxAmount = item.stockAmount;
					_this.infoList[_this.listIndex].List[_this.selectIndex].expireDate = item.expireDate;
					_this.infoList[_this.listIndex].List[_this.selectIndex].stockAmount = 1;
				}

				this.showBatch = false;
				item.isChecked = true;
			},
			togoConfirm() {
				let isConfirm = true;
				// if (!this.params.auditResult) return uni.$u.toast('备件审核不能为空')
				if (this.listInfo.partDetailResponses.length > 0) {
					this.listInfo.partDetailResponses.forEach((s, index) => {
						if (s.isPass == 2) { //不通过
							this.params[index].auditResult = 2;
							this.params[index].reason = s.reason;
						}
					})
				}
				this.params.forEach(s => {
					if (!s.auditResult) {
						uni.$u.toast('请选择备件审核条件')
						isConfirm = false;
						return
					}
					if (s.auditResult == 2 && !s.reason) {
						uni.$u.toast('请输入原因');
						isConfirm = false;
						return
					}
				})
				this.params.forEach((item, index) => {
					if (item.auditResult == 3) {
						item.detailRequests = [];
						this.infoList[index].List.forEach((s, i) => {
							let dd = {
								partId: s.partId,
								batchId: s.id,
								amount: s.stockAmount
							}
							item.detailRequests.push(dd);
						})
					}
				})
				this.params.forEach((item, index) => {
					if (item.auditResult == 3) {
						item.detailRequests.forEach((s, i) => {
							if (s.batchId == '') {
								uni.$u.toast('有出库批次未填写');
								isConfirm = false;
								return
							}
						})
					}
				})
				if (isConfirm) {
					this.loading = true;
					let obj = {
						applyId: this.listInfo.id,
						auditList: this.params
					}
					uni.$u.http.post(`/device/mobile/devicePartApply/appAuditPartApply`, obj)
						.then(res => {
							if (res.code == 0) {
								uni.$u.toast('提交成功')
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/subPackagesB/bjverify/index?currentId=1'
									})
								}, 500)
							}
							this.loading = false;
						}).catch(err => {
							this.loading = false
						})
				}

			},
			//添加出库批次
			addChukubatchNum(item, index) {
				console.log(item, 'item')
				if (!this.infoList[index].List[this.infoList[index].List.length - 1].batchNum) {
					uni.$u.toast('存在批次未选择，先选择批次')
				} else {
					let num = 0
					this.infoList[index].List.forEach(it => {
						num = num + (it.stockAmount ? it.stockAmount : 0)
					})
					if (num >= item.applyAmount) {
						uni.$u.toast('出库数量已大于等于申请数量，无法添加')
					} else {
						uni.$u.http.get(`/device/mobile/devicePartBatch/getPartBatchList/${item.partId}/1`).then(res => {
							if (res.code == 0) {
								this.BatchList = [];
								if (res.data.length > 0) {
									res.data.forEach(i => {
										if (i.stockAmount > 0) {
											this.BatchList.push(i);
										}
									})
								}
								if (this.BatchList.length == this.infoList[index].List.length) {
									uni.$u.toast('添加出库批次数不可超过总批次数')
								} else {
									console.log(item, 'item2')
									this.infoList[index].List.push({
										partId: item.partId,
										id: '',
										batchNum: '', //批次
										stockNum: '', //库存
										stockAmount: 1, //出库数量
									})
								}

							}
						}).catch(err => {
							uni.$u.toast(err)
						})
					}
				}
			},
			//删除出库批次
			deleteBatche(i, item, index) {
				this.infoList[i].List.splice(index, 1);
			},
			// onChange(e) {
			// 	console.log('dfsfsdfdsfsd', e)
			// 	var _this = this;
			// 	_this.infoList[_this.listIndex].List[e.name].stockAmount = e.value;
			// 	if (_this.infoList[_this.listIndex].List&&_this.infoList[_this.listIndex].List[e.name].stockAmount > _this.infoList[_this.listIndex].List[e.name]
			// 		.stockNum) {
			// 		_this.infoList[_this.listIndex].List[e.name].stockAmount = _this.infoList[_this.listIndex].List[e.name]
			// 			.stockNum;
			// 		return uni.$u.toast('不能超过最大库存')
			// 	}
			// },
			//全部不通过
			togoAllFail() {
				this.showAll = true
				var that = this;
			},
			//全部通过
			togoAllSuccess() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否保选择全部通过？',
					confirmText: '确定',
					cancelText: '取消',
					success: function(res) {
						if (res.confirm) {
							if (that.listInfo.partDetailResponses.length > 0) {
								that.listInfo.partDetailResponses.forEach((s, index) => {

									console.log(s, "s===>")
									s.isPass = '1'; //通过
									that.params[index].auditResult = 3;
									// that.getPartBatchList(s, index);
								})
							}
						} else if (res.cancel) {}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.right-ritle2 {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 16px;
		font-weight: 400;

		.all-chuku {
			color: #4D4D4D;
		}

		.all-btg {
			color: #FF4D4D;
		}
	}

	.list-wrapper {
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.list-item {
			display: flex;
			padding-bottom: 24rpx;
			background: #fff;
			border-radius: 4px;
			margin: 32rpx 32rpx 0 32rpx;
			border-bottom: 2rpx solid #f2f2f2;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;
					border-radius: 8rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-flow: column;

				.txt1 {
					font-size: 34rpx;
					color: #000000;
					width: 100%;
					display: flex;
					justify-content: space-between;

					// align-items: center;
					.txt1-left {
						width: 85%;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-break: break-all;
					}

					.txt1-right {
						width: 120rpx;
						height: 18px;
						text-align: right;
						margin-left: 30rpx;
					}
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin: 10rpx 0;
				}

				.txt3 {
					width: 500rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;
					color: #8c8c8c;
					font-size: 28rpx;
				}
			}
		}

		.item-radio {
			display: flex;
			align-items: center;
			margin: 24rpx 30rpx 0 30rpx;

			.left-radio {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #2b2b2b;

				.select-bg {
					color: #0F53AC;
					font-size: 40rpx;
				}
			}

			.right-radio {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #2b2b2b;
				margin-left: 100rpx;
			}
		}
	}

	.list-item :last-child {
		border-bottom: none;
	}

	.bx-list {
		// background: #f2f2f2;
		border-bottom: 2rpx solid #F5F5F5;
		margin: 0 20rpx;

		.bx-list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;

			.left {
				display: flex;
				align-items: center;
				font-size: 16px;
				font-weight: 400;
				color: #4D4D4D;
				min-width: 200rpx;

				.kucun-num {
					font-size: 14px;
					font-weight: 400;
					color: #8c8c8c;
					margin-left: 20rpx;
				}
			}

			.right {
				display: flex;
				justify-content: space-around;
				width: 50%;

				.sm-add {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}

				.sm-sd {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}
			}

			.right1 {
				display: flex;
				align-items: center;
				justify-content: end;
				font-size: 34rpx;
				color: #8c8c8c;

				.right-input {
					width: 100%;
					text-align: right;
					display: flex;
					align-items: center;
				}

				.txt-right {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 10rpx;

					.txt2 {
						font-size: 28rpx;
						color: #8c8c8c;
					}

					.addnum {
						.minus {
							color: #0F53AC;
							font-size: 34rpx;
						}

						.plus {
							color: #0F53AC;
							font-size: 34rpx;
						}

						.notselect-bg {
							color: #c4c4c4;
							font-size: 34rpx;
						}
					}
				}
			}
		}

		.bx-info {
			display: flex;
			padding: 10rpx 20rpx 20rpx 20rpx;

			.left-icon {
				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;

				.txt1 {
					color: #000000;
					font-size: 34rpx;
					font-weight: 400;
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}

		}

		// .input-textrea {
		// 	margin: 20rpx;
		// 	border-radius: 8rpx;
		// 	background: #f2f2f2;

		// 	.textrea {
		// 		background: #f2f2f2;
		// 	}
		// }

	}

	.delete-pc {
		color: #fa4016;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		border-bottom: 1px solid #EDEDED;
		margin: 2rpx 20rpx 0 20rpx;
		padding: 26rpx 0;
	}

	.addbtn-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		// margin-bottom: 30rpx;
		border-bottom: 1px solid #EDEDED;

		.add-btn {
			border-radius: 12rpx;
			padding: 26rpx 0;
			width: 340rpx;
			text-align: center;
			color: #0F53AC;
		}
	}

	.not-pass {
		font-size: 34rpx;
		color: #000000;
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;

	}

	.input-textrea {
		margin: 0 20rpx 20rpx 20rpx;
		border-radius: 8rpx;
		background: #f2f2f2;

		.textrea {
			background: #f2f2f2;
		}
	}

	.clear-btn {
		width: 100%;
		height: 125rpx;
	}

	.btn-bottom {
		width: 100%;
		// height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		padding: 24rpx 0;

		.btn-right {
			width: 85%;
			text-align: center;
			// padding: 20rpx 0;
			background: #0F53AC;
			color: #fff;
			border-radius: 12rpx;
			z-index: 10000;
		}
	}

	.sex-select {

		.sex-item {
			word-break: break-all;
			word-wrap: break-word;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #f2f2f2;

			.txt {
				width: 100%;
				padding: 20rpx 0;
				text-align: center;
			}

			.txt2 {
				background: #f2f2f2;
			}
		}
	}

	.desc-reason2 {
		margin-top: 16rpx;
	}

	.reason {
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			font-size: 34rpx;
			color: #000000;

			.left {
				width: 90%;
				text-align: center;
			}

			.title-right {
				width: 60rpx;
				margin-left: 0rpx;
				text-align: center;
			}
		}

		.input-textrea {
			margin: 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}

		.popup-btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx 0;

			.btn-comfir {
				width: 94%;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 6px;
				background: #0F53AC;
				text-align: center;
				font-size: 34rpx;
				color: #fff;

			}
		}
	}
</style>